<template>
	<view class="">
		<u-navbar title="卡项详情" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
		</u-navbar>
		<view class="card" :style="{background: data.bgColor}">
			<view class="tx coreshop-flex coreshop-flex-direction coreshop-justify-between coreshop-h-100">
				<view class="">
					<view class="name">{{data.name || data.cardItemName}}</view>
					<view v-if="cardType==='1'"class="coreshop-font-xs">含{{data.projectCount}}种项目</view>
					<view v-if="cardType==='2'"class="coreshop-font-xs">含{{data.projectCount}}种项目·共{{data.quantityAll}}次·剩余{{data.quantity}}次</view>
				</view>
				<view class="coreshop-font-sm" v-if="cardType==='2'">{{data.validityDate?data.validityDate.slice(0, 10):''}}到期</view>
			</view>
		</view>
		<view class="c-p-l-15 c-p-r-15" v-if="data.salePrice === 0">
			<view 
				class="coreshop-flex coreshop-justify-between coreshop-align-center coreshop-bg-white c-p-l-10" 
				@click="$u.route('/pages/member/merchant/storeList/storeList')">
				<text>消费门店</text>
				<u-input :value="storeName" input-align="right" placeholder="请选择消费门店" border="bottom" disabled disabledColor="#fff">
					<template slot="suffix">
						<u-icon name="arrow-right" size="22"></u-icon>
					</template>
				</u-input>
			</view>
		</view>
		<view class="c-list">
			<view class="c-item coreshop-flex coreshop-bg-white" v-for="(im,ix) in data.items" :key="ix">
				<image class="coreshop-image-120-120 flex-shink" src="../../../static/images/logo/logo.png" mode="aspectFit" />
				<view class="c-m-l-10 coreshop-percent-100 coreshop-flex coreshop-flex-direction coreshop-justify-between">
					<view class="coreshop-flex coreshop-justify-between coreshop-percent-100">
						<text class="coreshop-font-14">{{im.projectObj.name || im.projectName}}</text>
						<view class="line-red" v-if="cardType === '1'">
							<text class="coreshop-font-10">￥</text>
							<text>{{im.projectObj.price}}</text>
						</view>
						<view v-if="cardType === '2'">
							<u-button 
								type="primary" 
								color="#e54d42" 
								shape="circle" 
								text="去使用" 
								size="mini"
								@click="$u.route('/pages/reservation/seReservation',{projectId: im.projectId, itemId: im.id, type: 'consume'})"></u-button>
						</view>
					</view>
					<text class="coreshop-font-12 line-gray">x {{im.quantity || im.times}}</text>
					<text class="coreshop-font-12 line-gray" v-if="cardType === '1'">有效期: 领取后{{data.validDays}}天</text>
					<text class="coreshop-font-12 line-gray" v-if="cardType === '2'">{{data.validityDate?data.validityDate.slice(0, 10):''}} 到期</text>
				</view>
			</view>
			<u-gap :height="elementHeight" bgColor="#f7f7f7"></u-gap>
		</view>
		<view class="bottom">
			<view class="coreshop-flex coreshop-justify-between coreshop-align-center" v-if="cardType === '1'">
				<view class="coreshop-flex coreshop-align-end">
					<view class="c-m-r-10 line-red">
						<text class="coreshop-font-12">￥</text>
						<text>{{data.salePrice}}</text>
					</view>
					<view class="coreshop-font-12 line-gray c-through">
						<text>￥</text>
						<text>{{data.originalPrice}}</text>
					</view>
				</view>
				<view class="btn">
					<u-button v-if="data.salePrice === 0" type="primary" color="#e54d42" shape="circle" text="立即领取" @click="onReceive"></u-button>
					<u-button v-else type="primary" color="#e54d42" shape="circle" text="立即购买" @click="toAddOrder"></u-button>
				</view>
			</view>
		</view>
		<coreshop-login-modal :shareCode="shareCode"></coreshop-login-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shareCode: '',
				cardId: null,
				storeId: null,
				storeName:'',
				cardType: '1', // 1  购买模式  2 使用模式
				data: {},
				elementHeight: 0,
				orderType: this.$globalConstVars.paymentType.cardOrder, // 订单类型
			}
		},
		onLoad(opt) {
			if(opt.scene){
				const scene = decodeURIComponent(opt.scene)
				const params = scene.split(',')
				this.cardId = params[0]
				this.shareCode = params[1]
			}else {
				if(opt.shareCode){
				this.shareCode = opt.shareCode
				}
				this.cardId = opt.id
				this.cardType = opt.type
				if(this.cardType === '2'){
					this.storeId = opt.storeId
				}
			}
			uni.$on('store', obj => {
				this.storeName = obj.storeName
				this.storeId = obj.storeId
			})
			this.getDetails()
		},
		mounted() {
			this.getElementHeight()
		},
		methods: {
			onReceive(){
				if(uni.$u.test.isEmpty(this.storeName)){
					this.$u.toast('请选择消费门店!')
				}else {
					this.$u.api.addRechargeOrder({id: this.cardId, shareCode: this.shareCode, storeId:this.storeId }).then(res=>{
						if(res.status){
							this.$refs.uToast.show({
								message: res.msg,		
								complete() {
									uni.reLaunch({
										url: '/pages/member/carditem/index'
									});
								}
							})
						}else {
							this.$u.toast(res.msg)
						}
					})
				}
			},
			toAddOrder() {
				uni.showLoading({ title: '加载中' })
				//创建一个服务订单并跳转到支付
				let data = { id: this.cardId }
				this.$u.api.addRechargeOrder(data).then(res => {
					if (res.status) {
						uni.$u.route('/pages/payment/pay/pay?orderId=' + res.data + '&type=' + this.orderType + '&cardId=' + this.cardId)
						setTimeout(function() {
							uni.hideLoading()
						}, 1000)
					} else {
						uni.hideLoading()
						this.$u.toast(res.msg)
					}
				})
			},
			getElementHeight() {
				const query = uni.createSelectorQuery().in(this)
				query.select('.bottom').boundingClientRect(rect => {
					this.elementHeight = rect.height
				}).exec()
			},
			getDetails() {
				if(this.cardType === '1'){
					this.$u.api.CardItemDetial({ id: this.cardId, shareCode: this.shareCode }).then(res => {
						if (res.code === 0 && res.status) {
							this.data = {
								...res.data.model,
								items: res.data.items
							}
							console.log('this.data', this.data)
						}
					})
				}else if(this.cardType === '2'){
					this.$u.api.GetCardItemDetial({ id:this.cardId, storeId:this.storeId }).then(res=>{
						if (res.code === 0 && res.status) {
							this.data = {
								...res.data.model[0],
								items: res.data.items
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang='scss' scoped>
	.card {
		width: 690rpx;
		margin: auto;
		margin-bottom: 20rpx;
		padding: 30rpx 20rpx;
		height: 240rpx;
		border-radius: 10rpx;
		background-color: #323434;
		background-image: url('../../../static/images/my/card.png');
		background-size: 50% 50%;
		background-repeat: no-repeat;
		background-position: center left;

		.tx {
			color: #fff;
			line-height: 1.4;
		}
	}

	.c-list {
		.c-item {
			width: 690rpx;
			margin: auto;
			margin-bottom: 20rpx;
			padding: 20rpx;
			border-radius: 10rpx;
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		padding: 10rpx 20rpx 0 20rpx;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;

		.btn {
			width: 240rpx;
		}
	}
</style>
